<template>
  <div class="head">
    <div class="headerWrap w">
      <h1 class="logobox">
        <img src="../assets/img/indexLogo.6f8ac4f0.png" alt="" />
      </h1>
      <ul class="navbox">
        <li
          @click="jump('/home')"
          :class="{ current: $route.path === '/home' }"
        >
          首页
        </li>
        <li
          @click="jump('/goods')"
          :class="{ current: $route.path === '/goods' }"
        >
          全部商品
        </li>
        <li
          @click="jump('/user')"
          :class="{ current: $route.path === '/user/userinfo' }"
        >
          个人中心
        </li>
        <li
          @click="jump('/user/orderlist')"
          :class="{ current: $route.path === '/user/orderlist' }"
        >
          我的订单
        </li>
        <li
          @click="jump('/user/drumsticknum')"
          :class="{ current: $route.path === '/user/drumsticknum' }"
        >
          专属福利
        </li>
      </ul>
      <div class="searchbox">
        <input
          type="text"
          placeholder="请输入关键字"
          v-model.trim="keyword"
          @keyup.enter="search"
        />
        <span @click="search"
          ><img src="../assets/img/search.png" alt="" class="search-btn"
        /></span>
      </div>
    </div>
  </div>
</template> 
<script>
import router from "@/router";
import { mapActions } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    ...mapActions("showToast", ["asyncChangeShowToast"]),
    async search() {
      if (!this.keyword) {
        this.asyncChangeShowToast({
          content: "搜索内容不能为空",
          type: "info",
        });
        return;
      }

      if (this.keyword == this.$route.query.keyword) return (this.keyword = "");
      router.push({
        name: "Goods",
        query: {
          keyword: this.keyword,
        },
      });
      this.keyword = "";
    },
    jump(path) {
      // 添加节流
      // if (path == this.$route.path) return;
      router.push(path);
    },
  },
};
</script>
<style lang="less" scoped>
.head {
  width: 100%;
  background-color: #fff;
}
.headerWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  height: 118px;
  cursor: pointer;
  .navbox {
    width: 500px;
    display: flex;
    justify-content: space-between;
    .current {
      color: #0a328e;
    }
  }
}
.searchbox {
  display: flex;
  input {
    width: 214px;
    height: 40px;
    border: 1px solid #dedede;
    border-radius: 20px 0 0 20px;
    box-sizing: border-box;
    padding-left: 19px;
    outline-style: none;
  }
  span {
    width: 50px;
    height: 40px;
    background: #0a328e;
    border-radius: 0px 20px 20px 0px;
    text-align: center;
    line-height: 40px;
  }
  .search-btn {
    width: 15px;
    height: 15px;
  }
}
</style>